<!-- <script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';
import type { BasicOption } from '@vben/types';

import { computed, markRaw } from 'vue';

import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();

const MOCK_USER_OPTIONS: BasicOption[] = [
  {
    label: 'Super',
    value: 'vben',
  },
  {
    label: 'Admin',
    value: 'admin',
  },
  {
    label: 'User',
    value: 'jack',
  },
];

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenSelect',
      componentProps: {
        options: MOCK_USER_OPTIONS,
        placeholder: $t('authentication.selectAccount'),
      },
      fieldName: 'selectAccount',
      label: $t('authentication.selectAccount'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.selectAccount') })
        .optional()
        .default('vben'),
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      dependencies: {
        trigger(values, form) {
          if (values.selectAccount) {
            const findUser = MOCK_USER_OPTIONS.find(
              (item) => item.value === values.selectAccount,
            );
            if (findUser) {
              form.setValues({
                password: '123456',
                username: findUser.value,
              });
            }
          }
        },
        triggerFields: ['selectAccount'],
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: markRaw(SliderCaptcha),
      fieldName: 'captcha',
      rules: z.boolean().refine((value) => value, {
        message: $t('authentication.verifyRequiredTip'),
      }),
    },
  ];
});
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    @submit="authStore.authLogin"
  />
</template> -->

<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';

import { reactive, watch } from 'vue';
import { useRouter } from 'vue-router';

import { Title } from '@vben/common-ui';

import {
  Button,
  Checkbox,
  Form,
  FormItem,
  Input,
  InputPassword,
} from 'ant-design-vue';

import { useAuthStore } from '#/store';

const router = useRouter();
const useStore = useAuthStore();

useStore.refreshCaptchaImage();

const userLoginData = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
  remember: true,
});

const validateRules: Record<string, Rule[]> = {
  username: [{ required: true, trigger: 'blur' }],
  password: [{ required: true, trigger: 'blur', min: 5, max: 15 }],
  confirmPassword: [{ required: true, trigger: 'blur' }],
  code: [{ required: true, trigger: 'blur' }],
  uuid: [{ required: true, trigger: 'blur' }],
};

watch(useStore.captcha, () => {
  userLoginData.uuid = useStore.captcha.uuid;
});
const goToRegister = () => {
  router.push('/auth/register');
};
</script>

<template>
  <Form
    :model="userLoginData"
    @finish="useStore.authLogin(userLoginData)"
    :rules="validateRules"
  >
    <div>
      <Title>
        <slot name="title">
          {{ $t('authentication.loginSuccessDesc') }} 🚀
        </slot>
        <template #desc>
          <slot name="subTitle">
            {{ $t('authentication.loginSubtitle') }}
          </slot>
        </template>
      </Title>
    </div>
    <!-- 用户名 -->
    <FormItem name="username" label="用户名">
      <Input
        placeholder="请输入用户名"
        v-model:value="userLoginData.username"
      />
    </FormItem>
    <!-- 密码 -->
    <FormItem name="password" label="密码">
      <InputPassword
        placeholder="请输入密码"
        v-model:value="userLoginData.password"
      />
    </FormItem>

    <!-- 验证码 -->
    <FormItem name="code" label="验证码">
      <div class="flex gap-2">
        <Input placeholder="验证码" v-model:value="userLoginData.code" />
        <img
          :src="useStore.captcha.image"
          alt="验证码"
          class="h-[32px]"
          @click="useStore.refreshCaptchaImage()"
        />
      </div>
    </FormItem>
    <FormItem name="uuid" class="hidden">
      <Input :value="userLoginData.uuid" />
    </FormItem>
    <FormItem name="remember">
      <Checkbox v-model:checked="userLoginData.remember">记住密码</Checkbox>
    </FormItem>
    <!-- 提交区 -->
    <FormItem>
      <Button type="primary" block html-type="submit" class="w-full">
        登录
      </Button>
    </FormItem>

    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.accountTip') }}
      <span class="vben-link text-sm font-normal" @click.stop="goToRegister">
        {{ $t('authentication.signUp') }}
      </span>
    </div>
  </Form>
</template>
<style scoped>
:deep(.ant-form-item-label) {
  display: none;
}
</style>

<!-- <script lang="ts" setup>
import { computed, h, ref } from 'vue';
import { useVbenForm, z ,Title} from '@vben/common-ui';
import { Input } from 'ant-design-vue';
import { $t } from '@vben/locales';
import { getCaptchaImage } from '#/api';
import type { VbenFormSchema } from '@vben/common-ui';
const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        passwordStrength: true,
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      renderComponentContent() {
        return {
          strengthText: () => $t('authentication.passwordStrength'),
        };
      },
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.confirmPassword'),
      },
      dependencies: {
        rules(values) {
          const { password } = values;
          return z
            .string({ required_error: $t('authentication.passwordTip') })
            .min(1, { message: $t('authentication.passwordTip') })
            .refine((value) => value === password, {
              message: $t('authentication.confirmPasswordTip'),
            });
        },
        triggerFields: ['password'],
      },
      fieldName: 'confirmPassword',
      label: $t('authentication.confirmPassword'),
    },
    {
      component: '',

      fieldName: 'code',
    },
    {
      component: 'VbenCheckbox',
      fieldName: 'agreePolicy',
      renderComponentContent: () => ({
        default: () =>
          h('span', [
            $t('authentication.agree'),
            h(
              'a',
              {
                class: 'vben-link ml-1 ',
                href: '',
              },
              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
            ),
          ]),
      }),
      rules: z.boolean().refine((value) => !!value, {
        message: $t('authentication.agreeTip'),
      }),
    },
  ];
});
const [Form] = useVbenForm({
  // 基础配置
  commonConfig: {
    // 隐藏label标签
    hideLabel: true,
  },
  schema: formSchema.value,
  submitButtonOptions: { class: 'w-[50%] ml-0' },
  resetButtonOptions: { class: 'w-[50%] ml-0' },
  actionWrapperClass:{class:'flex gap-2 justify-between'},
  handleSubmit(res) {
    console.log(res);
  },
});

defineOptions({ name: 'Register' });
const captcha = ref();
getCaptchaImage()
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    captcha.value = `data:image/png;base64,${err.img}`;
    console.log('🚀 ~ register.vue:12 ~ err.data:', captcha.value);
  });

// function handleSubmit(value: Recordable<any>) {
//   // eslint-disable-next-line no-console
//   console.log('register submit:', value);
// }
</script>
 <template>
 <Title >
    <slot name="title"> {{ $t('authentication.createAnAccount') }} 🚀 </slot>
    <template #desc>
      <slot name="subTitle">
        {{ $t('authentication.signUpSubtitle') }}
      </slot>
    </template>
  </Title>
  <Form>
    <template #code>
      <div class="flex w-full justify-between gap-2">
        <Input class="w-[100px] flex-1" />
        <img :src="captcha" alt="" class="h-[42px]" />
      </div>
    </template>
  </Form>
  <div class="mt-4 text-center text-sm">
    {{ $t('authentication.alreadyHaveAccount') }}
    <span class="vben-link text-sm font-normal" @click="">
      {{ $t('authentication.goToLogin') }}
    </span>
  </div>
 <AuthenticationRegister
    :form-schema="formSchema"
    :loading="loading"
    @submit="handleSubmit"
  >
  </AuthenticationRegister>
</template> -->
